<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
			xmlns:f="http://java.sun.com/jsf/core"
			xmlns:em="http://java.sun.com/jsf/composite/ezcomp">

  <h:body>

    <ui:composition template="./WEB-INF/view/template.xhtml">

      <ui:define name="contents">

        <h:panelGroup id="singleColumn" layout="block">

					<h2>checkout</h2>

					<p>In order to purchase the items in your shopping cart, please provide us with the following information:</p>

					<f:view>
						<h:form>
							<h:panelGrid id="checkoutTable" styleClass="rounded"
													 cellpadding="16" columns="2">
								<h:outputLabel for="name" value="name:"/>
								<h:inputText id="name"
														 binding="#{checkoutManager.name}"
														 size="31"
														 maxlength="45"
														 required="true"
														 requiredMessage="A name is required (e.g., Bilbo Baggins)"
														 value="o"/>

								<h:outputLabel for="email" value="email"/>
								<h:inputText id="email"
														 binding="#{checkoutManager.email}"
														 size="31"
														 maxlength="45"
														 required="true"
														 requiredMessage="An email is required  (e.g., b.baggins@hobbit.com)"
														 validator="#{checkoutManager.validateEmail}"
														 value="a@a.com">
									<h:message showSummary="true" showDetail="false"
														 style="color: red;
														 font-family: 'New Century Schoolbook', serif;
														 font-style: oblique;
														 text-decoration: overline"
														 for="email"/>

								</h:inputText>

								<h:outputLabel for="phone" value="phone"/>
								<h:inputText id="phone"
														 binding="#{checkoutManager.phone}"
														 size="31"
														 maxlength="16"
														 required="true"
														 requiredMessage="A phone number is required  (e.g., 222333444)								"
														 validatorMessage="Phone number should contain at least 9 characters"
														 value="123456789">
									<f:validateLength minimum="9"/>
									<h:message showSummary="true" showDetail="false"
														 style="color: red;
														 font-family: 'New Century Schoolbook', serif;
														 font-style: oblique;
														 text-decoration: overline"
														 for="phone"/>
								</h:inputText>

								<h:outputLabel for="address" value="address"/>
								<h:inputText id="address"
														 binding="#{checkoutManager.address}"
														 size="31"
														 maxlength="45"
														 required="true"
														 requiredMessage="An address is required  (e.g., Korunní 56)"
														 value="a"/>

								<h:outputLabel for="card" value="credit card"/>
								<h:inputText id="card"
														 binding="#{checkoutManager.creditcard}"
														 size="31"
														 maxlength="19"
														 required="true"
														 requiredMessage="A credit card number is required  (e.g., 1111222233334444)"
														 value="1111222233334444"/>

								<h:inputHidden/>
								<h:commandButton action="#{checkoutManager.purchase()}"
																 value="submit purchase"/>
							</h:panelGrid>
						</h:form>
					</f:view>

					<h:panelGroup id="infoBox" layout="block">

						<ul>
							<li>Next-day delivery is guaranteed</li>
							<li>A &euro; ${initParam.deliverySurcharge}
                delivery surcharge is applied to all purchase orders</li>
						</ul>

						#{cartManager.cart.calculateTotal(initParam.deliverySurcharge)}

						<h:panelGrid id="priceBox" columns="2">
							<h:outputText value="subtotal:"/>
							<h:outputText styleClass="checkoutPriceColumn"
														value="&euro; ${cartManager.cart.subtotal}"/>
							<h:outputText value="delivery surcharge:"/>
							<h:outputText styleClass="checkoutPriceColumn"
														value="&euro; ${initParam.deliverySurcharge}"/>
							<h:outputText styleClass="total" value="total:"/>
							<h:outputText styleClass="total checkoutPriceColumn"
														value="&euro; ${cartManager.cart.total}"/>
						</h:panelGrid>

					</h:panelGroup>

				</h:panelGroup>

			</ui:define>

		</ui:composition>

	</h:body>

</html>
